<template>
	<view>
		<view class="padding-x-20 index_top nav_fixed_top">
			<view @click="goBack()" class="padding-y-30">
				<image src="../../static/img/back_f.png" style="width: 30rpx;height: 30rpx;margin: 0 auto;"></image>
			</view>
			<view class="radius10 padding-top-30 padding-x-24 bg-fff">
				<view class="flex align-center w100">
					<view class="fs-30 color-333 text-cut margin-right-48">{{info.name}}</view>
					<image style="width: 36rpx;height: 36rpx;" src="../../static/img/call_h.png" @click="toCall()">
					</image>
				</view>

				<view class="flex align-center margin-top-16">
					<view class="flex align-center">
						<!-- @tap="changeStar" :data-value="index" -->
						<image v-for="(item, index) in 5" :key="index"
							:src="info.score > index  ? '../../static/img/star_on.png':'../../static/img/star.png'"
							class="star_icon"></image>
						<text class="color-zhuse fs-24 margin-left-10">{{info.score}}</text>
					</view>
					<view @tap="openLocation(info.latitude,info.longitude,info.name)"
						class="flex align-center margin-left-30">
						<image src="../../static/img/ads.png" class="star_icon"></image>
						<text class="margin-left-10 fs-24 color-333">{{info.jw_address}}</text>
					</view>
				</view>
				<view class="margin-top-24 flex align-center flex-wrap padding-bottom-30 solid-bottom">
					<image @click="showImg(index,info.imgs)" v-for="(item,index) in info.imgs" :key='index' :src="item"
						class="radius10 goodsImg"></image>
				</view>
				<view class="padding-y-24 solid-bottom">
					<view class="fs-26 color-333 fw-600">企业简介</view>
					<view class="margin-top-16 fs-26 color-666">{{info.introduce}}</view>
				</view>
				<view class="padding-y-24">
					<view class="fs-26 color-333 fw-600">其他服务</view>
					<view class="margin-top-16 flex align-center">
						<view class="fs-24 color-zhuse margin-right-24" v-for="(item,index) in info.other" :key='index'
							style="padding: 10rpx 16rpx;background: rgba(255, 147, 46, 0.08);">{{item}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 轮播图 -->
		<view class="index_banner padding-30" v-if="banner.length">
			<swiper autoplay='true' class="swiper">
				<swiper-item v-for="(item,index) in banner" :key='index'>
					<view class="swiper-item">
						<image @click="showImg(index,banner)" :src="item" mode="aspectFit"	class="radius10"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 轮播图 end -->

		<!-- 菜品特色 -->
		<view class="padding-x-20 margin-top-30">
			<view class="bg-fff radius10 padding-x-20">
				<view class="padding-y-20 flex align-center justify-between">
					<view class="flex align-center">
						<view class="bg-zhuse" style="width: 6rpx;height: 26rpx;"></view>
						<text class="fs-28 color-333 margin-left-16">菜品特色</text>
					</view>
					<view @click="jump('/pages/my/shopGoods?shop_id='+shop_id)" class="flex align-center">
						<text class="fs-24 color-333 margin-right-16">更多</text>
						<image src="../../static/img/next2.png" style="width: 10rpx;height: 20rpx;"></image>
					</view>
				</view>

				<view class="flex align-center flex-wrap">
					<view v-for="(item,index) in info.goods" :key='index'
						class="flex align-center radius10 tsItem margin-bottom-24">
						<image :src="item.img"></image>
						<view class="text-center flex flex-direction align-center justify-center padding-x-20">
							<view class="fs-28 color-333 text-cut">{{item.name}}</view>
							<view class="fs-28 color-fuse text-cut margin-top-10">¥{{item.price}}</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<!-- 菜品特色end -->

		<!-- 房间 -->
		<view class="padding-x-20 margin-top-30" v-if="room.length">
			<view class="padding-y-20 flex align-center">
				<view v-for="(item,index) in room" :key='index' :class="roomIndex == index ? 'on':''"
					@click="changeIndex(index)" class="fs-24 color-999  padding-bottom-10 margin-right-30">{{item.name}}
				</view>
			</view>
			<view class="bg-fff radius10 padding-y-30 margin-top-16">
				<view v-if="room.length" class="padding-x-30 flex align-center justify-between">
					<view class="fs-28 color-333">{{room[roomIndex].name}}：</view>
					<view class="fs-24 color-fff btn" @click="$refs.room.open()">预定</view>
				</view>
				<!-- <view class="flex align-center justify-between margin-top-30 ">
					<view class="flex1 text-center">
						<view class="fs-28 color-zhuse">1233</view>
						<view class="fs-26 color-666 margin-top-10">房间数</view>
					</view>
					<view class="flex1 text-center">
						<view class="fs-28 color-zhuse">1233</view>
						<view class="fs-26 color-666 margin-top-10">已订数</view>
					</view>
					<view class="flex1 text-center">
						<view class="fs-28 color-zhuse">1233</view>
						<view class="fs-26 color-666 margin-top-10">未订数</view>
					</view>
					<view class="flex1 text-center">
						<view class="fs-28 color-zhuse">1233</view>
						<view class="fs-26 color-666 margin-top-10">退订数</view>
					</view>
				</view> -->
			</view>
		</view>
		<!-- 房间end -->

		<!-- 买单 -->
		<!-- <view class="padding-x-20 margin-top-30">
			<view class="padding-y-20 flex align-center">
				<view class="flex align-center">
					<view class="bg-zhuse" style="width: 6rpx;height: 26rpx;"></view>
					<text class="fs-28 color-333 margin-left-16">买单</text>
				</view>
			</view>
			<view class="bg-fff radius10 padding-x-20 padding-y-30 flex align-center justify-between">
				<view>
					<view class="fs-30 color-333">账单结算</view>
					<view class="fs-24 color-333 margin-top-16">更便捷更划算</view>
				</view>
				<view>
					<view class="fs-24 color-fff btn" @click="$refs.popup.open()">买单</view>
					<view class="fs-24 color-999 margin-top-16 text-right">已售{{info.sale}}</view>
				</view>
			</view>
		</view> -->
		<!-- 买单end -->

		<!-- 评价 -->
		<view class="padding-x-20 margin-top-30">
			<view class="bg-fff radius10 padding-x-40 padding-y-30">
				<view @click="jump('/pages/canyin/comment?shop_id='+shop_id)" class="flex align-center justify-between">
					<view class="flex align-center">
						<text class="color-zhuse fs-40">{{info.score}}</text>
						<view class="margin-left-20">
							<view class="fs-24 color-333">整体评分</view>
							<view class="flex align-center margin-top-10">
								<image v-for="(item, index) in 5" :key="index"
									:src="info.score > index  ? '../../static/img/star_on.png':'../../static/img/star.png'"
									class="star_icon"></image>
							</view>
						</view>
					</view>
					<view class="flex align-center text-center">
						<view class="margin-right-24">
							<view class="fs-20 color-333">消费环境</view>
							<view class="fs-22 color-zhuse">{{info.environment}}</view>
						</view>
						<view class="margin-right-24">
							<view class="fs-20 color-333">服务质量</view>
							<view class="fs-22 color-zhuse">{{info.service}}</view>
						</view>
						<view class="margin-right-24">
							<view class="fs-20 color-333">满意度</view>
							<view class="fs-22 color-zhuse">{{info.satisfied}}</view>
						</view>
						<image src="../../static/img/next2.png" style="width: 10rpx;height: 20rpx;"></image>
					</view>
				</view>
				<view class="flex align-center margin-top-24">
					<text class="fs-20 color-666 margin-right-20"
						style="padding: 10rpx;background: rgba(153, 153, 153, 0.08);">晒图评价 {{info.img_comment}}</text>
					<text class="fs-20 color-666 margin-right-20"
						style="padding: 10rpx;background: rgba(153, 153, 153, 0.08);">最新评价 {{info.new_comment}}</text>
				</view>

				<!-- 评价列表 -->
				<view v-for="(item,index) in comment" :key='index' class="margin-top-40">
					<view class="flex align-center justify-between">
						<view class="flex align-center">
							<image style="width: 72rpx;height: 72rpx;border-radius: 100%;" :src="item.avatar"></image>
							<view class="margin-left-20">
								<view class="fs-24 color-333">{{item.name}}</view>
								<view class="flex align-center">
									<image v-for="(item2, index2) in 5" :key="index2"
										:src="item.score > index2  ? '../../static/img/star_on.png':'../../static/img/star.png'"
										class="star_icon"></image>
								</view>
							</view>
						</view>
						<text class="fs-22 color-999">{{item.create_time}}</text>
					</view>
					<view class="fs-26 color-333 margin-y-16">{{item.content}}</view>
					<view class="flex align-center flex-wrap margin-top-20">
						<image v-for="(item,index) in item.imgs" :key='index'
							style="width: 160rpx;height: 160rpx;margin-right: 16rpx;" :src="item" class="radius10">
						</image>
					</view>
				</view>
				<!-- 评价列表end -->

			</view>
		</view>
		<!-- 评价end -->

		<!-- 买单提示框 -->
		<uni-popup ref="popup" type="center">
			<view class="bg-fff padding-40 radius10">
				<view class="text-center fs-32 color-000">请输入买单金额</view>
				<input type="number" focus v-model="amount" style="width: 500rpx;"
					class="bg-f7f7f7 h40 margin-top-48 w100 padding-x-24" />
				<view class="flex align-center jui_flex_center padding-x-16 w100 margin-top-48">
					<view class="public_btn flex1" @click="maidan">确定</view>
					<view class="public_btn-kong flex1" @click="close2()">取消</view>
				</view>
			</view>
		</uni-popup>
		<!-- 买单提示框end -->

		<!-- 选择房间号 -->
		<uni-popup ref="room" type="center" style="max-width: 80%;">
			<view class="bg-fff padding-40 radius10">
				<view class="text-center fs-32 color-000">选择房间号</view>
				<view class="margin-top-30 flex align-center flex-wrap" v-if="room.length > 0">
					<view class="color-999 fs-26  room_item" @click="checkRoom(item.id)"
						:class="room_id == item.id ? 'act':''" v-for="(item,index) in room[roomIndex].data"
						:key='index'>{{item.name}}</view>
				</view>

				<view class="flex align-center jui_flex_center padding-x-16 w100 margin-top-30">
					<view class="public_btn flex1" @click="orderRoom()">确定</view>
					<view class="public_btn-kong flex1" @click="close()">取消</view>
				</view>
			</view>
		</uni-popup>
		<!-- 选择房间号end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shop_id: '',
				info: {},
				room: [],
				roomIndex: 0,
				room_id: "",
				comment: [],
				amount: '',
				banner:[]
			}
		},
		onLoad(opt) {
			this.shop_id = opt.id;
			this.init()
		},
		methods: {
			// changeStar(e) {
			// 	this.curStarNum = Number(e.currentTarget.dataset.value) + 1;
			// },

			init() {
				this.$api.shop_info({
					shop_id: this.shop_id
				}).then(res => {
					if (res.code == 1) {
						this.info = res.data;
						this.banner = res.data.banner;
						this.room = res.data.room
					}
				})
				this.$api.comment_list({
					shop_id: this.shop_id,
					type: 'all',
					page: 1
				}).then(res => {
					if (res.code == 1) {
						this.comment = res.data.data
					}
				})
			},

			changeIndex(index) {
				this.roomIndex = index
			},
			// 预定房间
			checkRoom(id) {
				this.room_id = id;
			},
			orderRoom() {
				this.$refs.room.close()
				this.$api.order_room({
					room_id: this.room_id
				}).then(res => {
					this.$msg(res.msg)
					if (res.code == 1) {

					}
				})
			},
			close() {
				this.room_id = '';
				this.$refs.room.close()
			},

			close2() {
				this.$refs.popup.close()
			},

			maidan() {
				this.$api.offline_payment({
					to_member_id: this.shop_id,
					amount: this.amount
				}).then(res => {
					if (res.code == 1) {
						uni.navigateTo({
							url: '/pages/canyin/pay?pay_amount=' + res.data.pay_amount + '&member_id=' +
								res.data.id + '&points=' + res.data.points + '&points_amount=' + res.data
								.points_amount
						})
					} else {
						this.$msg(res.msg)
					}
				})
			},

			// 拨打电话
			toCall() {
				uni.makePhoneCall({
					phoneNumber: this.info.mobile
				});
			},

			openLocation(lat, lon, name) {
				uni.openLocation({
					latitude: Number(lat),
					longitude: Number(lon),
					name: name,
					success: function() {
						console.log('success');
					}
				});
			},

			// 预览商家图片
			showImg(index, imgs) {
				var that = this;
				uni.previewImage({
					current: index,
					urls: imgs,
					longPressActions: {
						itemList: ['保存图片'],
						success: function(data) {
							uni.downloadFile({
								url: imgs[index],
								success: res2 => {
									uni.saveImageToPhotosAlbum({
										filePath: res2.tempFilePath,
										success: res2 => {
											that.$msg('保存成功');
										}
									});
								}
							});
							// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},

		}
	}
</script>

<style>
	page {
		background: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	.btn {
		width: 110rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		border-radius: 60rpx;
		background: linear-gradient(to bottom, #FE8009, #FE951E, #FDA932);
	}

	.on {
		color: $uni-color-zhuse;
		font-size: 28rpx;
		border-bottom: 4rpx solid $uni-color-zhuse;
	}

	.index_top {
		background: linear-gradient(to bottom, #FF7B00, #FCBA72, #FFFFFF);
	}

	.room_item {
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		padding: 12rpx 20rpx;
		margin: 12rpx 16rpx;
	}

	.room_item.act {
		background: $uni-color-zhuse;
		color: #fff;
		border: 1rpx solid $uni-color-zhuse;
	}

	/deep/.uni-popup__wrapper-box {
		max-width: 80%;
	}

	.star_icon {
		width: 32rpx;
		height: 32rpx;
	}

	.public_btn {
		height: 62rpx;
		line-height: 62rpx;
		border-radius: 10rpx;
	}

	.public_btn-kong {
		margin-right: 0 !important;
		margin-left: 30rpx !important;
		border-radius: 10rpx;
		color: $uni-color-zhuse;
		border: 1rpx solid $uni-color-zhuse;
	}

	.goodsImg {
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
	}

	.tsItem {
		width: 48%;
		margin-right: 4%;
		background: rgba(153, 153, 153, 0.08);

		image {
			width: 100%;
			height: 140rpx;
		}
	}

	.tsItem:nth-child(2n+2) {
		margin-right: 0;
	}

	.index_banner {
		.swiper {
			height: 300rpx !important;
		}
		image {
			width: 100%;
			height: 300rpx !important;
		}
	}
</style>
